<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .body{
            width: 400px;
            background-color: rgb(252, 223, 223);
            position: absolute;
             top: 60px;
              bottom: 50px;
        }
        .header-top{
            height: 60px;
            width: 400px;
            background-color: pink;
            display: flex;
            justify-content: space-between;
        }
        .header-top img{
            border-radius: 50%;
        }
        p{
            z-index: 10;
        }
        .base{
            width: 400px;
            display: flex;
            height: 50px;
            background-color: rgb(177, 112, 124);
            position: absolute;
            bottom: 0;
            justify-content: space-around;
            align-items: center;
        }
        .base img{
            width: 40px;
        }
        
        .right-img{
            font-size: 40px;
            margin-right: 20px;
        }
        .qq{
            height: 100%;
            width: 400px;
            background-color: rgb(252, 223, 223);
        }
        .person-img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        .person-p{
            align-items: center;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        let Home={
            template:`
                <div class="header">
                        <div class="header-top">
                            <img src="./头像.jpg" alt="">
                            <div>
                                <slot name="center"></slot>
                            </div>
                            <div class="right-img">
                                <slot name="right">+</slot>
                            </div>
                        </div>
                        <div class="body">消息页面</div>
                </div>
            `,
        }
        let massage = {
            template:`
            <div class="massage">
                <home></home>
                    <p>消息组件</p>
            </div>
            `,components:{Home},
        }
        let person = {
            template:`
            <div class="person">
                <home>
                    <p slot="center" class="person-p">联系人</p>
                    <img slot="right" src="./添加好友.svg" alt="" 
                    class="person-img"></img>
                </home>
                <div class="body">联系人页面</div>
            </div>
            `,components:{Home},
        }
        let dynamic = {
            template:`
            <div class="dynamic">
                <home>
                    <p slot="center" class="person-p">动态</p>
                    <img slot="right" src="./排序-左右.svg" alt="" 
                    class="person-img">图标2</img>
                </home>
                <div class="body">动态组件页面</div>
            </div>
            `,components:{Home},
        }
        let App = {
            template:`
                <div class="qq">
                        <component :is="active"></component>
                        <div class="base">
                        <div @click="changeNav('massage')"><img src="./消息.svg" alt="">消息</div>
                        <div @click="changeNav('person')"><img src="./联系人.svg" alt="">联系人</div>
                        <div @click="changeNav('dynamic')"><img src="./动态.svg" alt="">动态</div>
                    </div>
                    
                </div>
            `,
            data(){
                return{navList:[
                        {name:'消息',activeName:'massage'},
                        {name:'联系人',activeName:'person'},
                        {name:'动态',activeName:'dynamic'}
                    ],
                    active:'home'
                }
            },
            methods:{
                changeNav(name){
                    console.log('name',name);
                    this.active = name
                }
            },
            components:{ Home,massage,person,dynamic },
        }
        new Vue ({
            render : h => h (App)
        }).$mount("#app")
    </script>
</body>
</html>